import React, { useState, useRef, useEffect } from "react";
import { SideBar, Swiper } from "antd-mobile";
import "./Fen.css";
import { useNavigate } from "react-router-dom";
import SearchBar from "./SearchBar";

export default function Classify() {
  const tabs = [
    {
      key: "水果类",
      title: "水果类",
    },
    {
      key: "家电类",
      title: "家电类",
    },
    {
      key: "首饰类",
      title: "首饰类",
    },
    {
      key: "粮油类",
      title: "粮油类",
    },
  ];

  const cate = [
    {
      id: 5,
      name: "苹果",
      image:
        "https://pic3.zhimg.com/80/v2-8e355085242beb2ca2c9988d969ce9bf_qhd.jpg",
      cate_id: "水果类",
    },
    {
      id: 6,
      name: "洗衣机",
      image:
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.oRNnzTAOXMNl591Nt1en1gHaE7?rs=1&pid=ImgDetMain",
      cate_id: "家电类",
    },
    {
      id: 7,
      name: "金龙鱼",
      image:
        "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/116288/6/7587/132880/5ec532d2Ec200889f/185ee4dd3ae364ca.jpg!q80.dpg",
      cate_id: "粮油类",
    },
    {
      id: 8,
      name: "项链",
      image:
        "http://img.alicdn.com/img/i3/58316501/O1CN01IK2SgQ1xtVpPOEeZG_!!0-saturn_solar.jpg_360x360q90.jpg",
      cate_id: "首饰类",
    },
    {
      id: 9,
      name: "草莓",
      image:
        "https://ts1.cn.mm.bing.net/th/id/R-C.b0a0f13f21437df6259e8ab53e2e6eb5?rik=IXc449PtR1IZDg&riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f190102%2f1P5415T0-3.jpg&ehk=U1tZj8klg06Mg7FERfCE0MTa0yG7fiEjvMoqp5XINOw%3d&risl=&pid=ImgRaw&r=0",
      cate_id: "水果类",
    },
    {
      id: 10,
      name: "桃子",
      image:
        "https://ts1.cn.mm.bing.net/th/id/R-C.4b446dd8f96a297c25facf876ecb4bd0?rik=qKO%2f550ueD7mGg&riu=http%3a%2f%2fpic.ntimg.cn%2f20140822%2f11443480_100551444150_2.jpg&ehk=LCbXULhyT9%2fvcMDM9x%2fIBwmUJ2fHVpOkaWCjwUdSbFI%3d&risl=&pid=ImgRaw&r=0",
      cate_id: "水果类",
    },
    {
      id: 11,
      name: "风扇",
      image:
        "http://img.alicdn.com/img/i2/2423797663/O1CN018Wql3T26Ti2iEwPZ6_!!2423797663-0-alimamacc.jpg_360x360q90.jpg",
      cate_id: "家电类",
    },
    {
      id: 12,
      name: "插排",
      image:
        "http://img.alicdn.com/img/i1/2213151995390/O1CN010RPacR1pgfmfJevAQ_!!2213151995390-0-alimamacc.jpg_360x360q90.jpg",
      cate_id: "家电类",
    },
    {
      id: 13,
      name: "戒指",
      image:
        "https://picasso.alicdn.com/imgextra/O1CNA1gvH49b1TeujAOK5eE_!!2216580562408-0-psf.jpg_360x360q90.jpg",
      cate_id: "首饰类",
    },
    {
      id: 14,
      name: "耳钉",
      image:
        "https://picasso.alicdn.com/imgextra/O1CNA15CbaId2FJw916nwba_!!1921348860-0-psf.jpg_360x360q90.jpg",
      cate_id: "首饰类",
    },
  ];

  const navigate = useNavigate();
  const ref = useRef();
  const [texts, setTexts] = useState(["精选天然水果", "纯天然蔬菜水果生鲜"]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const textRef = useRef(null);
  const [activeKey, setActiveKey] = useState("水果类");

  const images = [
    "https://i0.hippopx.com/photos/585/625/261/wild-fruits-fruits-wild-fruit-preview.jpg",
    "https://i0.hippopx.com/photos/596/716/896/grapes-fruits-fruit-fruit-bowl-preview.jpg",
    "https://i0.hippopx.com/photos/547/26/553/orange-fruit-fruits-clove-preview.jpg",
    "https://i0.hippopx.com/photos/973/641/241/lemons-ice-water-summer-preview.jpg",
    "https://i0.hippopx.com/photos/219/841/228/fruit-fruits-vitamins-healthy-preview.jpg",
  ];
  const fen1 = (key) => {
    setActiveKey(key);
  };

  return (
    <div>
      <SearchBar></SearchBar>
      <div className="container">
        <div className="side">
          <SideBar
            activeKey={activeKey}
            onChange={(key) => {
              fen1(key);
            }}
            style={{ "--background-color": "rgb(244,248,255)" }}
          >
            {tabs.map((item) => (
              <SideBar.Item
                key={item.key}
                title={item.title}
                style={{ height: "6.25rem", lineHeight: "6.25rem" }}
              />
            ))}
          </SideBar>
        </div>
        <div className="main">
          <Swiper loop autoplay className="lbt">
            {images.map((i, j) => (
              <Swiper.Item key={j} className="lbt-item">
                <img
                  src={i}
                  alt=""
                  style={{
                    width: "16.5625rem",
                    height: "8.75rem",
                    borderRadius: "1.25rem",
                  }}
                />
              </Swiper.Item>
            ))}
          </Swiper>
          <div>
            <div>
              <ul className="fen-one">
                {cate
                  .filter((i) => {
                    return i.cate_id === activeKey;
                  })
                  .map((item) => {
                    return (
                      <li key={item.id}>
                        <img
                          src={item.image}
                          alt=""
                          onClick={() => {
                            navigate("/header");
                          }}
                          style={{
                            width: "4.375rem",
                            height: "4.375rem",
                            borderRadius: "20%",
                          }}
                        />
                        <div
                          style={{
                            margin: "15px",
                            height: "1.25rem",
                            lineHeight: "1.25rem",
                          }}
                        >
                          <p>{item.name}</p>
                          <p>
                            <img
                              src="./public/已售.png"
                              alt=""
                              style={{ width: "100px", height: "25px" }}
                            />
                          </p>
                          <p style={{ color: "red" }}>￥9.9</p>
                        </div>
                      </li>
                    );
                  })}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
